<template>
    <div>

      <el-tabs class="dishMenu" type="border-card" v-model="tagType" @tab-click="tabChange">
        <el-tab-pane v-for="i in tagList" :label="i.name">
          <div class="table-search" style="width: 100%; padding-left: 20px !important;" >
            <el-row :gutter="20">
              <el-col :span="6">
                <el-input @keyup.enter.native="keyDown($event)" placeholder="请输入下发名称" v-model="input" :maxlength="20" size="medium">
                  <template slot="prepend">下发名称</template>
                </el-input>
              </el-col>
              <el-col :span="10">
                <div  class="text-left">
                  <el-button type="primary"  size="medium" class="btn-info"   icon="el-icon-search"  @click="search">搜索</el-button>
                  <el-button type="primary" size="medium" class="btn-warning" style="margin-left: 1px"   icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="table-padding" style="padding:0 20px !important;">
            <!--原料下发 start-->
            <div v-if="i.name=='原料下发'">
              <div class="title-buttons">
                <el-button v-hasPermission="'management_dishesMenu:create'" class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新增下发原料&nbsp;</el-button>
              </div>
              <el-table
                v-loading="loading"
                :data="tableData"
                :border="true"
                style="width: 100%">
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="下发商品库名称">
                  <template  slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="适用门店">
                  <template  slot-scope="scope">
                    <span><el-button type="text" @click="isStoreNum=!isStoreNum;activityId=scope.row.id">{{scope.row.branchs}}</el-button></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="生效日期">
                  <template  slot-scope="scope">
                    <span>{{scope.row.effectiveTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="创建时间">
                  <template  slot-scope="scope">
                    <span>{{scope.row.operateTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作人">
                  <template  slot-scope="scope">
                    <span>{{scope.row.operatorName}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态">
                  <template  slot-scope="scope">
                    <span v-if="scope.row.state=='NORMAL'">正常</span>
                    <span v-if="scope.row.state=='DISABLED'">禁用</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作" width="200">
                  <template scope="scope" >
                    <!--<el-button v-hasPermission="'management_dishesMenu:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,2)" v-if=" scope.row.state=='DISABLED'" >启用 | </el-button>-->
                    <!--<el-button v-hasPermission="'management_dishesMenu:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,1)" v-if=" scope.row.state=='NORMAL'" >停用 | </el-button>-->
                    <el-button type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >查看 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:update'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >重新下发 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:destory'" style="margin: 0px;" @click="handleDelete(scope.$index,scope.$index,scope.row.id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <br>
              <div class="block">
                <el-row>
                  <el-col :span="24" class="text-right">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--原料下发 END-->

            <!--商品下发 start-->
            <div v-if="i.name=='商品下发'">
              <div class="title-buttons">
                <el-button v-hasPermission="'management_dishesMenu:create'" class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新增下发商品&nbsp;</el-button>
              </div>
              <el-table
                v-loading="loading"
                :data="tableData"
                :border="true"
                style="width: 100%">
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="下发商品库名称">
                  <template  slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="适用门店">
                  <template  slot-scope="scope">
                    <span><el-button type="text" @click="isStoreNum=!isStoreNum;activityId=scope.row.id">{{scope.row.branchs}}</el-button></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="生效日期">
                  <template  slot-scope="scope">
                    <span>{{scope.row.effectiveTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="创建时间">
                  <template  slot-scope="scope">
                    <span>{{scope.row.operateTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作人">
                  <template  slot-scope="scope">
                    <span>{{scope.row.operatorName}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态">
                  <template  slot-scope="scope">
                    <span v-if="scope.row.state=='NORMAL'">正常</span>
                    <span v-if="scope.row.state=='DISABLED'">禁用</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作" width="200">
                  <template scope="scope" >
                    <el-button v-hasPermission="'management_dishesMenu:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,2)" v-if=" scope.row.state=='DISABLED'" >启用 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,1)" v-if=" scope.row.state=='NORMAL'" >停用 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:update'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >修改 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:destory'" style="margin: 0px;" @click="handleDelete(scope.$index,scope.$index,scope.row.id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <br>
              <div class="block">
                <el-row>
                  <el-col :span="24" class="text-right">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--商品下发 END-->

            <!--成本卡下发 start-->
            <div v-if="i.name=='成本卡下发'">
              <div class="title-buttons">
                <el-button v-hasPermission="'management_dishesMenu:create'" class="title-button btn-primary"  size="medium" @click="addShow=true;activityId=''" icon="el-icon-plus">新增下发成本卡&nbsp;</el-button>
              </div>
              <el-table
                v-loading="loading"
                :data="tableData"
                :border="true"
                style="width: 100%">
                <el-table-column
                  type="index"
                  width="50">
                </el-table-column>
                <el-table-column
                  label="下发商品库名称">
                  <template  slot-scope="scope">
                    <span>{{scope.row.name}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="适用门店">
                  <template  slot-scope="scope">
                    <span><el-button type="text" @click="isStoreNum=!isStoreNum;activityId=scope.row.id">{{scope.row.branchs}}</el-button></span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="生效日期">
                  <template  slot-scope="scope">
                    <span>{{scope.row.effectiveTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="创建时间">
                  <template  slot-scope="scope">
                    <span>{{scope.row.operateTime}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作人">
                  <template  slot-scope="scope">
                    <span>{{scope.row.operatorName}}</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="状态">
                  <template  slot-scope="scope">
                    <span v-if="scope.row.state=='NORMAL'">正常</span>
                    <span v-if="scope.row.state=='DISABLED'">禁用</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="操作" width="200">
                  <template scope="scope" >
                    <el-button v-hasPermission="'management_dishesMenu:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,2)" v-if=" scope.row.state=='DISABLED'" >启用 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:updateState'" type="text" size="small" style="margin: 0px;" @click="updateState(scope.row.id,1)" v-if=" scope.row.state=='NORMAL'" >停用 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:update'" type="text" size="small" style="margin: 0px;" @click="addShow=true;activityId=scope.row.id" >修改 | </el-button>
                    <el-button v-hasPermission="'management_dishesMenu:destory'" style="margin: 0px;" @click="handleDelete(scope.$index,scope.$index,scope.row.id)" type="text" size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <br>
              <div class="block">
                <el-row>
                  <el-col :span="24" class="text-right">
                    <el-pagination
                      @size-change="handleSizeChange"
                      @current-change="handleCurrentChange"
                      :current-page="currentPage"
                      :page-sizes="pageSizes"
                      :page-size="pageSize"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
                    </el-pagination>
                  </el-col>
                </el-row>
              </div>
            </div>
            <!--成本卡下发 END-->

          </div>
        </el-tab-pane>
      </el-tabs>


      <model :isShow="addShow" :tagType="tagType" v-on:relationShow="showRelation" :id="activityId" @close="addClose" @addSuccess="addSuccess"></model>
      <storeNum :isShow="isStoreNum" :id="activityId" @close="addClose1" @addSuccess="addSuccess1"></storeNum>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
    </div>
</template>
<script>
    //注意路径
    import model from './model.vue'
    import storeNum from './storeNum.vue'
    export default{
        data(){
            return {
                treeData:[],
                defaultProps: {
                    children: 'children',
                    label:function(data){
                            return "["+data.no+"]"+data.name;
                        }
                },
              isStoreNum:false,
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                dialogIsShow:false,
                addShow:false,
                relationShow:false,
                activityId:"",
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
              storeId:window.localStorage.getItem("dishKuId"),
              tagList:[{name:'原料下发'},{name:'商品下发'},{name:'成本卡下发'}],
              tableIndex:0,
              tagType:"",

            }
        },
        components: {
           model,
          storeNum
        },
        created(){
            window.this = this;
            this.initData();
        },
        methods: {
          tabChange(index,active){
            console.log(index);
//            this.supplier="";
//            this.warehouse="";
//            this.createAt="";
//            this.createAt1 = "";
//            this.input = "";
            this.tableIndex = index.index;
            this.search();
          },
          updateState(id,item){
            var st='停用';
            if(item==1){
              st='停用';
            }else{
              st='启用';
            }
            this.$confirm('确定将状态改为'+st+', 是否继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.$axios.get("dishes/dishesMenus/updateState?id="+id).then(data => {
                if(data.success){
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  });
                  this.initData();
                }else{
                  this.$message({
                    type: 'error',
                    message: data.message
                  });
                }

              })

            }).catch(() => {
              // this.$message({
              //   type: 'info',
              //   message: '已取消修改状态'
              // });
            });

          },
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
                // this.loading=true;
                this.$axios.get("dishes/dishesMenus?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like="+this.inputValue+"&storeId="+this.storeId).then((data)=>{
                    this.loading=false
                    this.tableData=data.content.content;
                    this.total=data.content.totalElements
                }).catch(function(err){
                 })
            },
            handleDelete(index,delIndex,id) {
                this.selectItmeIndex=index,
                this.selectItemDetailsIndex=delIndex;
                this.selectDelId=id;
                this.dialogIsShow=true;
            },
             dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("dishes/dishesSpecifications/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },

              addSuccess(item){
            this.relationShow = false;
            this.addShow=false;
            this.currentPage=1;
            this.initData();
          },
          addSuccess1(item){
            this.isStoreNum = false;
            this.addShow=false;
            this.currentPage=1;
            this.initData();
          },

            addClose(){
                this.relationShow = false;
                this.addShow=false;
            },
          addClose1(){
            this.isStoreNum=false;
          },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
            showRelation(data){
                this.addShow = false;
                this.relationShow = true;
            }
        }
    }
</script>
<style scoped>
</style>
